<template>
	<view>
		<u-navbar title-color="#000" :isBack="true" back-icon-color="#000" height="60" title="注册"></u-navbar>
		<view class="input-box">
			<view class="user-icon">
				<u-avatar :size="140" @click="updataUsericon" :src="userUrl"></u-avatar>
			</view>
			<view class="input-item">
				<view class="input-label">用户名</view>
				<view class="input-body">
					<input v-model="userName" type="text" style="margin-right: 160upx;" placeholder="请输入用户名" class="input">
				</view>
			</view>
			<view class="input-item">
				<view class="input-label">用户名</view>
				<view class="input-body">
					<u-input :height="100" type="select" :select-open="actionSheetShow" v-model="userSex" placeholder="请选择性别" @click="actionSheetShow = true"></u-input>
				</view>
			</view>
			<view class="input-item">
				<view class="input-label">手机号</view>
				<view class="input-body">
					<input v-model="phone" maxlength="11" type="number" style="margin-right: 160upx;" placeholder="请输入手机号" class="input">
				</view>
			</view>
			<view class="input-item">
				<view class="input-label">密码</view>
				<view class="input-body">
					<input v-model="password" type="text" :password="isHidePassword?true:false" style="margin-right: 50upx;"
					 placeholder="请输入密码" maxlength="20" class="input" />
					<image @click="isHidePasswordClick" class="eye" :src="isHidePassword?'/static/img/attention.png':'/static/img/attention_forbid.png'"></image>
				</view>
			</view>
			<view class="input-item">
				<view class="input-label">验证码</view>
				<view class="input-body">
					<input placeholder="请输入验证码" type="text" v-model="code" maxlength="6" class="input">
					<image :src="src" @click="get_code" class="code"></image>
				</view>
			</view>
		</view>
		<button class="button" @click="submit">注册</button>
		<u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet>
	</view>
</template>

<script>
	let timer = '';
	export default {
		data() {
			return {
				isHidePassword: true,
				phone: "",
				password: "",
				code: "",
				userUrl: '',
				userName: '',
				src: '/api/svg',
				userSex: '女',
				actionSheetList: [{
						id: 0,
						text: '男'
					},
					{
						id: 1,
						text: '女'
					},
					{
						id: 2,
						text: '保密'
					}
				],
				actionSheetShow: false,
			};
		},
		methods: {
			isHidePasswordClick() {
				this.isHidePassword = !this.isHidePassword
			},
			actionSheetCallback(index) {
				uni.hideKeyboard();
				this.userSex = this.actionSheetList[index].text;
			},
			get_code() {
				this.src = this.src + '?t=' + (new Date).getTime();
			},
			updataUsericon() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success(res) {
						const src = res.tempFilePaths[0];
						that.$comm.navigateTo('/pages/upload/upload?src=' + src + '&width=295&height=295')
					}
				});
			},
			updataImg(avatar) {
				this.userUrl = avatar
			},
			submit() {

				let data = {
					userPhone: this.phone,
					userPass: this.password,
					code: this.code,
					userName: this.userName,
					userSex: this.userSex,
					userUrl: this.userUrl
				}
				// let valLoginRes = this.$validate.validate(data, [{
				// 		name: 'userPhone',
				// 		type: 'phone',
				// 		required: 'true',
				// 		errmsg: '请输入的正确的手机号'
				// 	},
				// 	{
				// 		name: 'userPass',
				// 		type: 'required',
				// 		errmsg: '密码不能为空'
				// 	},
				// 	{
				// 		name: 'code',
				// 		type: 'required',
				// 		errmsg: '验证码不能为空'
				// 	},
				// 	{
				// 		name: 'userName',
				// 		type: 'required',
				// 		errmsg: '用户名不能为空'
				// 	},
				// 	{
				// 		name: 'userUrl',
				// 		type: 'required',
				// 		errmsg: '头像不能为空'
				// 	}
				// ])
				// if (!valLoginRes.isOk) {
				// 	this.$comm.errorToShow(valLoginRes.errmsg)
				// 	return false
				// }

				this.$api.register(data).then(res => {
					if (res.code) {
						this.$comm.successToShow(res.data.msg, () => {
							this.$comm.redirectTo("/pages/login/login")
						})
					} else {
						this.$comm.errorToShow(res.msg)
						this.get_code()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@mixin page {
		background-color: #FFFFFF;
		min-height: 100vh;
	}

	page {
		@include page;
	}

	.user-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20upx;
	}
</style>
